<template>
	<div class="m-newsong">
		<headbg :picUrl="album.pic_str"></headbg>
		<div class="m-song_nor">
			<div class="m-scroll_scroller_vertical m-scroll_scroller">
				<div>
					<mlogo></mlogo>
					<div class="m-song_newfst" ref="newfst">
						<songwrap :picUrl="album.picUrl" :playstate="playstate" ref="songwrap"></songwrap>
						<div class="m-song-clickarea" @click="togglePlay"></div>
						<div>
							<div class="m-song-info">
								<h2 class="m-song-h2">
									<span class="m-song-sname">{{song.name}}</span>
									<span class="m-song-gap">-</span>
									<b class="m-song-autr">{{singer.name}}</b>
								</h2>
								<div class="m-song-lrc f-pr">
									<div class="m-song-scroll" ref="mSongScroll">
										<div class="m-song-iner" ref="songIner" v-if="lyric.lines">
											<p class="m-song-lritem j-lritem" v-for="(line,index) in lyric.lines" :key="line.id" :style="{'color':curLineNum == index?'#fff':''}">
												{{line.txt}}
											</p>
										</div>
										<p class="m-song-lritem" ref="pretext" v-if="!lyric.lines">歌词加载中...</p>
									</div>
								</div>
							</div>
							<a :href="'orpheus://song/'+song.id" class="m-link link-appear-done link-enter-done">
								查看完整歌词 >
							</a>
						</div>
						<div class="m-giude" style="bottom: -14px;">
							<i class="arr ani"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="u-footer">
			<a :href="'orpheus://song/'+song.id"  class="u-btn u-btn-red">打开</a>
			<a href="javascript:void(0)" class="u-btn u-btn-red">下载</a>
		</div>
	</div>
</template>

<script>
	import headbg from '@/components/song/headbg.vue';
	import mlogo from '@/components/song/mlogo.vue';
	import songwrap from '@/components/song/songwrap.vue';
	import Lyric from 'lyric-parser';
	import api from "@/config/api.js";

	// let rdeg = 0;
	export default {
		data() {
			return {
				alpic_str: "", //专辑背景图
				song: "", //歌曲对象
				singer: "", //歌手，
				album: "", //专辑
				lyric: "", //歌词
				cH: 0, //当行歌词的高度
				songObj: '', //管理歌曲对象
				playstate: false,
				rdeg: 0,
				curLineNum: 0 //记录当前歌词播放行
			}
		},
		mounted() {
			this._setNewfstHeight();
			this._setScrollHeight();
			// 获取ids
			let ids = this.$route.query.id || "";
			if (ids) {
				// 创建歌曲对象
				this.songObj = this._createSong(ids);
				// console.log(this.songObj)
				this.songObj.play()
					.then(() => {
						// console.log("播放成功");
						this.playstate = true;
						this.songObj.play();
						this.lyric.play()
					})
					.catch(() => {
						// console.log(err)
					})
				// 获取歌词
				this._get_lyric(ids)
					.then(res => {
						// console.log(res)
						let lyric2 = res.data.lrc.lyric;
						// console.log(lyric2.split('\n'))
						this.lyric = new Lyric(lyric2, this.moveLyric)
					})

				this._get_song_detail(ids)
					.then(res => {
						// console.log(res)
						this.song = res.data.songs[0];
						this.singer = this.song.ar[0];
						this.album = this.song.al;
					})
			}
		},
		methods: {
			_setNewfstHeight(){
			const docH = document.documentElement.clientHeight;
			this.$refs.newfst.style.height = docH - 60 +"px";
			},
			// 歌词滚动
			moveLyric({lineNum}) {
				// console.log('txt', txt);
				// console.log('lineNum', lineNum);
				this.curLineNum = lineNum;
				// var songIner = document.querySelector(".m-song-iner")
				this.$refs.songIner.style.transform = `translateY(-${lineNum*this.cH}px)`;
			},
			togglePlay() {
				// console.log(this.songObj.paused)
				if (this.songObj.paused) {
					this.songObj.play()
					this.playstate = true;
					if (this.curLineNum) {
						// console.log(this.songObj.currentTime);
						this.lyric.seek(this.songObj.currentTime * 1000);
						return;
					}
					this.lyric.play()
				} else {
					// 点击暂停时，获取当前的歌曲的时间
					// 计算角度1秒转rdeg
					// 20秒为一个循环
					// console.log(this.songObj.currentTime)
					// console.log(rdeg)
					// 计算秒
					// let currentTime = this.songObj.currentTime;
					// this.rdeg = (parseInt(currentTime % 20)) * 18;
					// document.querySelector(".m-song-rollwrap").style.transform=`rotate(${rdeg}deg)`
					// document.querySelector(".m-song-light").style.transform=`rotate(${rdeg}deg)`

					this.songObj.pause()
					this.lyric.stop()
					// 最简单css做法,
					// ---控制animation-play-state
					this.playstate = false;
				}
			},
			// 歌曲的创建
			_createSong(id) {
				var audio = document.createElement("audio");
				audio.src = this._getSongUrl(id);
				return audio;
			},
			// 歌曲的接口
			_getSongUrl(id) {
				return `https://music.163.com/song/media/outer/url?id=${id}.mp3 `
			},
			_setScrollHeight() {
				// 获取单行元素的高度
				// 触发一次重绘
				// console.log(this.$refs.pretext)
				const pretext = this.$refs.pretext;
				const cH = pretext.clientHeight;
				this.cH = cH;
				let pB = window.getComputedStyle(pretext).paddingBottom;
				// console.log(pB)
				pB = parseFloat(pB)
				this.$refs.mSongScroll.style.height = 2 * cH - pB + "px"

			},

			_get_song_detail(ids) {
				return this.$axios({
					method: "get",
					url: api.songdetail,
					params: {
						ids: ids
					}
				})
			},
			_get_lyric(ids) {
				return this.$axios({
					method: "get",
					url: api.lyric,
					params: {
						"id": ids
					}
				})
			}
		},
		components: {
			headbg,
			mlogo,
			songwrap
		}
	}
</script>

<style lang="scss">
	.m-newsong {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		min-width: 320px;
		height: 100vh;
		overflow: hidden;
	}

	.m-song_nor {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 60px;
		overflow: hidden;
		z-index: 21;
	}

	.m-scroll_scroller {
		backface-visibility: hidden;
		z-index: 1;
		user-select: none;
	}

	.m-scroll_scroller_vertical {
		position: absolute;
		left: 0;
		top: 0;
		min-height: 100%;
		width: 100%;
	}

	.m-song .m-song_newfst {
		position: relative;
		padding-bottom: 12px;
		box-sizing: border-box;
	}

	.m-song-info {
		padding: 0 35px;
		margin-top: 25px;
	}

	.m-song-h2 {
		text-align: center;
		font-size: 15px;
		line-height: 1.1;
		color: #fefefe;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.m-song-gap {
		margin: 0 4px;
	}

	.m-song-autr {
		font-size: 13px;
		color: hsla(0, 0%, 100%, .6);
	}

	.m-song-lrc {
		position: relative;
		margin-top: 14px;
	}

	.m-song-lremp,
	.m-song-scroll {
		text-align: center;
		color: hsla(0, 0%, 100%, .6);
	}

	.m-song-scroll {
		line-height: 1.5;
		font-size: 13px;
		height: 72px;
		overflow: hidden;
	}

	.m-song-iner {
		transition: transform .3s ease-out, -webkit-transform .3s ease-out;
	}

	.m-song-lritem {
		padding-bottom: 5px;
	}

	.m-link {
		color: hsla(0, 0%, 100%, .6);
		height: 30px;
		line-height: 30px;
		position: absolute;
		bottom: 20px;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: env(safe-area-inset-bottom);
	}

	.m-song-clickarea {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		bottom: 52px;
		z-index: 10;
		margin-bottom: env(safe-area-inset-bottom);
	}

	.m-giude {
		position: absolute;
		left: 0;
		right: 0;
		height: 36px;
		padding-top: 10px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 10;
		margin-bottom: env(safe-area-inset-bottom);
	}

	.m-giude .arr {
		display: block;
		width: 17px;
		height: 12px;
		background-repeat: no-repeat;
		background-size: 17px auto;
		background-image: url();
		background-position: 0 0;
	}

	.m-giude .arr.ani {
		animation: shining 1.2s steps(1) infinite;
	}

	@media screen and (min-width: 375px) {
		.m-song-h2 {
			font-size: 18px;
		}

		.m-song-autr,
		.m-song-pure {
			font-size: 16px;
		}

		.m-song-scroll {
			font-size: 16px;
		}

		.m-song-lritem {
			padding-bottom: 8px;
		}
	}

	@keyframes shining {
		0% {
			background-position: 0 0;
		}

		15% {
			background-position: 0 -12px;
		}

		30% {
			background-position: 0 -24px;
		}

		45% {
			background-position: 0 -36px;
		}

		60% {
			background-position: 0 -48px;
		}

		75% {
			background-position: 0 -60px;
		}

		90% {
			background-position: 0 -72px;
		}

		100% {
			background-position: 0 -84px;
		}
	}

	.u-footer {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 10px;
		z-index: 100;
		padding: 0 10px;
		margin: 0 auto;
		display: flex;
	}

	.u-btn:first-child {
		background: rgba(0, 0, 0, 0);
		color: #ff3a3a;
	}

	.u-btn {
		flex: 1 1 auto;
		height: 40px;
		line-height: 40px;
		padding: 0 6px;
		border: 1px solid #adadad;
		border-radius: 40px;
		font-size: 18px;
		background-color: #fff;
		box-sizing: border-box;
	}

	.u-btn {
		display: inline-block;
		text-align: center;
	}

	.u-btn:last-child {
		color: #fff;
		background-color: #ff3a3a;
		margin-left: 10px;
	}
</style>
